<template>
  <div>
    <span class="mar">
      {{obj.name}}
    </span>
    <span class="mar">
      {{arr}}
    </span>
    <span class="mar">{{ arr1.list }}</span>
    <span class="mar">{{ message }}</span>
  </div>
</template>

<script setup lang="ts">
import { reactive ,readonly,shallowReactive} from 'vue'
let arr = reactive<number[]>([])
let obj = reactive({name:'富哥'})
obj.name = '富姐' //对象赋值无需.value 
let newArr = [1,2,3] //需要赋值的数据
//解构数据进行改变响应
arr.push(...newArr)
//如果想直接赋值 可先定义一个类型
type o = {
  list: any[] //此处可定义为any 如接口返回可不用写对应类型直接使用
}
let arr1 = reactive<o>({ //引用泛型 感觉还是改成了对象赋值 只不过是对象中的数组而已
  list:[]
})
arr1.list = [1,2,3,4,5,]
//readonly 拷贝属性不能修改
let obj1 = reactive({
  count:1
})
obj1.count++ //原数据没有问题
let copy = readonly(obj1)
// copy.count++ //此处提示不能修改
let message = shallowReactive({
  nav:{
    bar:{
      name:'1212'
    }
  }
})

</script>

<style scoped lang='less'>
.mar{
  margin: 30px;
}
</style>